.commentList {
  width: 100%;
  margin: 0 auto;
  .left {
    display: inline-block;
    width: 5%;
    height: 100%;
    .img1 {
      // margin: 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .img2 {
      // margin: 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
  .p1 {
    float: left;
  }
  .right {
    display: inline-block;
    width: 93%;
    margin-left: 5px;
    
    .rightTop {
      .userName {
        color: #FB7299;
      }
      .reply{
        font-size: 13px;
        margin: 0 5px;
      }
      .timeAgo {
        color: #909399;
        margin-left: 10px;
      }
    }
    .rightCenter {
      color: #000;
      font-size: 15px;
      margin: 5px 0 5px 0;
    }
    .rightBottom {
      color: #aaaaaa;
      font-size: 13px;
      .b1 {
        margin-left: 10px;
      }
    }
  }
}


@media only screen and (min-width: 300px) and (max-width: 767px) {
  .commentList .left {
    display: inline-block;
    width: 30px;
    height: 100%;
  }
  .commentList .right {
    display: inline-block;
    width: calc(100% - 35px);
    margin-left: 5px;
  }
}